<template>
  <div
    ref="heardItem"
    id="tem1-heard-item"
    class="heard-item"
    :style="{
      height: flag ? '100%' : '1.49333rem',
      background: getColor,
    }"
    @click="prevent()"
  >
    <div
      :class="{
        ' heard-item-active': flag,
      }"
      style="width: 100%; height: 100%; transition: all 0.5s"
    >
      <div class="heard-content">
        <div>
          <div v-if="route.meta.title != '模板首页'" @click="goBack">
            <img class="blank-img" v-show="!flag" :src="publicUrls + 'customized/zjz/unitIcon22.png'" alt="" />
          </div>
        </div>
        <div class="center-box" v-if="route.meta.title == '子单元'">
          <titleCom :title="store.childModel ? store.childModel.text : ''" />
        </div>

        <div class="gotoNav" style="">
          <img v-show="!flag" :src="publicUrls + 'customized/zjz/heardIcon1.png'" alt="" @click="gotoNav(1)" />
          <img v-show="flag" :src="publicUrls + 'customized/zjz/heardIconClose.png'" alt="" @click="gotoNav(2)" />
          <!-- <i v-show="flag" style="color: #fff" class="doorIcon" @click="gotoNav(2)">&#xe675;</i> -->
        </div>
      </div>
    </div>
    <div
      class="navBox"
      :style="{
        height: flag ? 'calc(100% - 50px)' : '0px',
      }"
    >
      <div class="nav">
        <div class="navRight-box">
          <div class="navRight" ref="navRight" @touchmove.stop>
            <div class="nav-item-parent">
              <div
                @click="pathChilds(item.id, item, index, false)"
                class="nav-item"
                :class="{ 'nav-item-1': index === 0 }"
                v-for="(item, index) in list"
                :key="item.id"
                :value="index"
              >
                <span :style="{ color: unitCurrent === index ? 'rgba(162, 70, 60, 1)' : 'rgba(51, 51, 51, 1)' }">{{
                  item.text
                }}</span>
              </div>
            </div>
          </div>
          <div class="menuFooter"><menuFooter @setEmitCruuent="setEmitCruuent"></menuFooter></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="heardTab">
// @ts-nocheck

import { ref, watch, onMounted, computed, nextTick } from 'vue';
import titleCom from '../title/title.vue';
import { useRoute, useRouter } from 'vue-router';
import { pathList, pathListLoop } from '../route';
import { publicUrls } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import { settings } from '@/api/project/project';
import arrowLeft from '../publicComponents/wapComponents/arrowLeft.vue';
import arrowRightVue from '../publicComponents/wapComponents/arrowRight.vue';
import menuFooter from './menuFooter.vue';
const router = useRouter();
const route = useRoute();
const modelId = ref(0);
const current = ref(0);
const currentNum = ref(0);
const heightNum = ref(0);
const lineDiv1 = ref(null);
const lineDiv2 = ref(null);
const heardItem = ref(null);
const arrowIcon = ref(null);
const flag = ref(false);
const noHomeFlag = ref(false); //非首页
const expandFlag = ref(false); //是否展开面板
const navRight = ref(null);
const PanelRef = ref(null);
const item1TextRef = ref(null);
const enterUnitRef = ref(null);
const lockShow = ref(false);
const unitCurrent = ref(0);
const unitChildrenCurrent = ref(0);
const store = useProjectStore();
const { tabvalue, childModel, styleInfo } = storeToRefs(store);
// console.log(store.childModel.id, store.styleInfo.moduleList, '-------');

const projectId = Number(localStorage.getItem('projectId'));
const list = ref([
  {
    id: 0,
    text: '首页',
    children: [],
  },
]);
const getColor = computed(() => {
  if (route.meta.title === '模板首页') {
    if (flag.value) {
      return 'rgba(241, 232, 214, .8)';
    } else {
      return 'transparent';
    }
  } else if (route.meta.title == '子单元') {
    return '#F1E8D6';
    // if (
    //   (store.childModel.value && store.childModel.children.length > 0) ||
    //   (store.childModel.showpieceTotal > 0 && store.childModel.value)
    // ) {
    //   if (flag.value) {
    //     return 'transparent';
    //   } else {
    //     return 'transparent';
    //   }
    // } else {
    //   if (flag.value) {
    //     return 'transparent';
    //   } else {
    //     return store.styleInfo.themeColor;
    //   }
    // }
  } else if (route.meta.title == '展品详情') {
    return '#F1E8D6';
  } else {
    if (flag.value) {
      return 'transparent';
    } else {
      return store.styleInfo.themeColor;
    }
  }
});
const changColoRef = ref(null);

const tabList = ref([
  { name: '首页', isShow: true, id: 0 },
  { name: '展品图库', isShow: true, id: 1 },
  { name: '文创商品', isShow: true, id: 4 },
  { name: '版权声明', isShow: true, id: 5 },
  { name: '学术研究', isShow: true, id: 3 },
  { name: '留言板', isShow: true, id: 2 },
]);
const mouseover = (e: number) => {
  modelId.value = e;
};
const props = defineProps({
  position: {
    type: String,
    default: 'relative',
  },
  color: {
    type: String,
    default: '#ffffff',
  },
  flag: Boolean,
});
const routeFlag = ref(false);
list.value = list.value.concat(store.styleInfo.moduleList).slice(1);
// //console.log(list.value);

const emit = defineEmits(['pathChild', 'changeFlag']);
const getListElements = () => {
  return document.querySelectorAll('.hw-unit-box-selct-i');
};
const pathChilds = (e: number, item: any, index: number, isChild: Boolean) => {
  flag.value = false;
  store.homeCurrent = index;
  if (route.meta.title != '模板首页') {
    setCruuent(0, true);
  }
  nextTick(() => {
    const elements = getListElements();
    const element = elements[store.homeCurrent];
    if (element) {
      // 滚动选项
      const options = {
        behavior: 'smooth',
        block: 'start',
      };

      // 高亮效果

      // nextTick(() => {
      // 滚动到元素
      element.scrollIntoView(options);

      // });
    }
  });
  prevent();
};

const arrowIconFlag = ref(false);
const changeCurrent = (index: any) => {
  // unitCurrent.value = index;
};
//阻止导航底部滚动事件
function handleTouchMove(e) {
  console.log('touchmove', flag.value);
  e.preventDefault();
}
const prevent = () => {
  if (flag.value) {
    console.log('flag.value里面', flag.value);
    // document.addEventListener('touchmove', handleTouchMove, { passive: false });
    document.body.style.overflow = 'hidden';
  } else {
    // document.removeEventListener('touchmove', handleTouchMove);
    document.body.style.overflow = 'auto';
  }
};

const gotoNav = (num: number) => {
  flag.value = !flag.value;
  // console.log(flag.value);

  if (num === 1) {
    nextTick(() => {
      noHomeFlag.value = false;
    });
  } else {
    if (route.name === 'templateHomeLoopWap') {
      nextTick(() => {
        noHomeFlag.value = false;
      });
    } else {
      nextTick(() => {
        noHomeFlag.value = true;
      });
    }
  }
  prevent();
};
const setEmitCruuent = (e: number, isShow: Boolean) => {
  setCruuent(e, isShow);
};
const setCruuent = (e: number, isShow: Boolean) => {
  // console.log('e', e);
  if (!isShow) {
    return;
  }
  switch (e) {
    case 0:
      router.push({
        name: route.meta.loopType ? pathListLoop[0] : pathList[0],
        query: {},
      });
      setTimeout(() => {
        var dom = document.getElementById('template1Box');
        dom.scrollIntoView({ block: 'start' });
      }, 100);
      break;
    case 1:
      router.push({
        name: route.meta.loopType ? pathListLoop[1] : pathList[1],
        query: {},
      });
      break;
    case 2:
      router.push({
        name: route.meta.loopType ? pathListLoop[7] : pathList[7],
        query: {},
      });
      break;
    case 3:
      router.push({
        name: route.meta.loopType ? pathListLoop[3] : pathList[3],
        query: {},
      });
      break;
    case 5:
      router.push({
        name: route.meta.loopType ? pathListLoop[6] : pathList[6],
        query: {},
      });
      break;
    case 6:
      router.push({
        name: 'templateteamLoopWap',
        query: {},
      });
      break;
    default:
      router.push({
        name: route.meta.loopType ? pathListLoop[5] : pathList[5],
        query: {},
      });
      break;
  }
  flag.value = false;
};

const initSetting = async () => {
  try {
    // tabList.value = [
    //   { name: '首页', isShow: true, id: 0 },
    //   { name: '展品图库', isShow: true, id: 1 },
    //   { name: '文创商品', isShow: true, id: 4 },
    //   { name: '版权声明', isShow: true, id: 5 },
    //   { name: '学术研究', isShow: true, id: 3 },
    //   { name: '留言板', isShow: true, id: 2 },
    // ];
    // let res = await settings(localStorage.getItem('projectId'), 3);
    // res.data.forEach((element) => {
    //   if (!element.config) {
    //     // //console.log('element.type', element.type);
    //     switch (element.type) {
    //       case 2:
    //         tabList.value[5].isShow = false;
    //         break;
    //       case 3:
    //         tabList.value[4].isShow = false;
    //         break;
    //       case 4:
    //         tabList.value[2].isShow = false;
    //         break;
    //       case 5:
    //         tabList.value[3].isShow = false;
    //         break;
    //     }
    //   }
    // });
    // //console.log('tabList', res.data);
  } catch {}
};
initSetting();
const goBack = () => {
  // console.log(router, route, window.history.state, 'router');

  if (!window.history.state.back) {
    router.push({
      name: route.meta.loopType ? pathListLoop[0] : pathList[0],
      query: {},
    });
  } else {
    // console.log('888');

    if (route.query.flag) {
      flag.value = !flag.value;
    } else {
      router.back();
    }
  }
};

watch(
  () => props.flag,
  () => {
    if (props.flag) {
      flag.value = false;
      emit('changeFlag', false);
      setTimeout(() => {
        changeCurrent();
        // heardItem.value.style.background = 'rgba(0, 0, 0, 0.4)';
      }, 500);
      // lineDiv1.value.style.transform = 'rotate(0deg)';
      // lineDiv1.value.style.marginBottom = '10px';
      // lineDiv2.value.style.transform = 'rotate(-0deg)';
    }
  },
  { deep: true },
);

watch(
  () => store.homeCurrent,
  (value) => {
    unitCurrent.value = store.homeCurrent;
  },
  { immediate: true, deep: true },
);

watch(
  () => unitCurrent.value,
  () => {
    store.homeCurrent = unitCurrent.value;
  },
  { deep: true, immediate: true },
);
watch(
  () => route.name,
  () => {
    if (
      route.name === 'templateHomeLoopWap' ||
      route.name === 'templateExhibitsLoopWap' ||
      route.name === 'templateResearchLoopWap' ||
      route.name === 'templateCopyrightLoopWap' ||
      route.name === 'templateCommodityLoopWap'
    ) {
      noHomeFlag.value = false;
    } else {
      noHomeFlag.value = true;
    }
  },
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped>
.t-col {
  margin: 0;
  height: 34px;
}
.t-row {
  padding: 11px;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.img-box {
  // width: 100%;
  height: 100%;
  justify-content: left;
}
.item-title {
  font-size: 18px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin-left: 27px;
  line-height: 21px;
}
.item-title:hover {
  // font-size: 14px;
  // font-weight: bold;
  // color: #ffffff;
  // line-height: 21px;
  // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.item-active {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  line-height: 21px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.hw-box-style-flex {
  height: 100%;
  justify-content: flex-end;
}
.heard-item {
  display: flex;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  height: 100%;
  min-width: 100%;
  z-index: 251;
  transition: all 0.5s;
  // background: rgba(0, 0, 0, 0.4);
}
.center-box {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
}
.t-row {
  margin-top: 0;
  padding-left: 130px;
  padding-right: 130px;
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  opacity: 0.8;
}
// .pop-item:hover {
//   opacity: 1;
// }
.gotoNav {
  // height: 12px;
  display: flex;
  flex-direction: column;
  transition: all 5.5s;
  img {
    width: 24px;
    height: 24px;
    transition: all 5.5s;
  }
  .doorIcon {
    font-size: 24px;
  }
}
.lineDiv {
  width: 32px;
  height: 1px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.5s;
}
.lineDiv:first-child {
  margin-bottom: 10px;
}

.navBox {
  width: 100%;
  height: 100%;
  // background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 50px;
  transition: all 0.5s;
  backdrop-filter: blur(4px);
}
.heard-item-active {
  backdrop-filter: blur(4px);
}
.nav {
  height: 100%;
  width: 100%;
  margin: auto;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  // position: relative;
  // padding-bottom: 100px;
  .navLeft {
    // width: 64px;
    height: 480px;
    font-size: 16px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
    margin-right: 130px;
    // padding-top: 93px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    > div {
      padding: 25px 0;
    }
    // > div:hover {
    //   color: #d2ad77;
    // }
  }
  .navRight-box {
    flex: 1;
    height: 100%;
    overflow: auto;
    position: relative;
  }
  .navRight {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    overflow: auto;
    transition: all 0.5s;
    padding: 0 16px;
    // padding-top: 50px;

    // overflow-y: auto;
  }
}

.nav-item-parent {
  width: 100%;
}
.nav-item {
  display: flex;
  width: 100%;
  height: 76px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    line-height: 36px;
    text-align: left;
  }
}
.nav-item-1 {
  height: 56px;
  padding: 0;
  padding-bottom: 20px;
}
::-webkit-scrollbar {
  width: 0;
}
/deep/.t-collapse {
  color: #fff;
}
/deep/.t-collapse-panel__wrapper .t-collapse-panel__content {
  color: #fff;
  padding-left: 44px;
  padding-bottom: 0.4rem;
}
.headerText {
  width: 100%;
  height: 52px;
  line-height: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  // font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  // font-weight: bold;
  display: flex;
  justify-content: space-between;
  padding-left: 12px;
  font-size: 16px;
  font-weight: 400;
}
// .headerText:hover {
//   color: #d2ad77;
// }
.item1Text {
  padding: 0.3rem 0;
  transition: all 0.3s;
  font-size: 16px;
  // padding-left: 44px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
}
// .item1Text:hover {
//   // color: #d2ad77;
//   padding-left: 12px;
// }
.arrowLeftBox {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: calc(50% + 620px);
}
.arrowLeft {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: rotate(90deg);
  padding-left: 1px;
  margin-bottom: 16px;

  :deep(.iconfonts) {
    color: #fff !important;
    font-size: 22px !important;
    // position: absolute;
    // left: 50%;
  }
}
/deep/.t-collapse-panel__header {
  padding: 0;
  position: relative;
}

.enterIcon {
  display: inline-block;
  width: 16px;
  font-size: 16px;

  transform: rotate(-90deg) !important;
}
.logoImg {
  max-width: 130px;
  height: 32px;
}
.heard-content {
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  transition: all 1s;
  .doorIcon {
    font-size: 24px;
  }
  .blank-img {
    width: 24px;
    height: 24px;
  }
}
.menuFooter {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.arrow {
  display: inline-block;
  // transform: rotate(-90deg);
}
.arrow1 {
  display: inline-block;
  transform: rotate(180deg);
}
:deep(.t-is-clickable) {
  cursor: none !important;
  position: relative;
}
/deep/.t-collapse-panel__icon {
  // display: none;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 4px;
  // transform: rotate(90deg);
  cursor: none;
  font-size: 28px !important;
}
/deep/.t-collapse-panel__icon .doorIcon {
  font-size: 16px !important;
}
/deep/.t-collapse-panel__icon--active > .doorIcon {
  transform: rotate(180deg);
}
/deep/.t-collapse-panel__icon:hover {
  background: none;
}
</style>
